import { Card, Form, Input, Button, Checkbox } from 'antd'
import logo from '../../assets/logo.png'
import { useDispatch,useSelector } from 'react-redux'
import { useNavigate } from "react-router-dom"
import { loginAction } from '../../store/modules/login'
import { useEffect } from 'react'
import './index.scss'
const Login = () => {
  const dispatch = useDispatch()
  const history = useNavigate()
  const token = useSelector(state => state.login.token);
const onFinish = async (values) => {
 dispatch(loginAction(values))
}
useEffect(() => {
  if (token) {
    history('/')
  }
}, [token])
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
    <Form validateTrigger={['onChange', 'onBlur']}
    onFinish={onFinish}
    >
      <Form.Item name='mobile'
      rules={[
        {
          required: true,
          message: '请输入手机号'
        },
        {
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式错误',
          validateTrigger: 'onBlur'
        }
      ]}
      >
        <Input size="large" placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item name='code'
      rules={[ 
        { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
        { required: true, message: '请输入验证码' }
      ]}>
        <Input size="large" placeholder="请输入验证码" />
      </Form.Item>
      <Form.Item
       name="remember" 
       valuePropName="checked"
      >
        <Checkbox className="login-checkbox-label">
          我已阅读并同意「用户协议」和「隐私条款」
        </Checkbox>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" size="large" block>
          登录
        </Button>
      </Form.Item>
    </Form>
      </Card>
    </div>
  )
}

export default Login